<!DOCTYPE html>

<head>
    <!--<link rel="stylesheet" href="/static/index/css/bootstrap.min.css">-->
    <!--<link rel="stylesheet" href="__CSS__bootstrap.min.css">-->
    <!--{load href="__CSS__bootstrap.min.css"}-->
    {css  href="__CSS__bootstrap.min.css"}
    {css  href="__INDEX__reset.css"}
    {css href="__CSS__toastr.min.css"}

    <!--{js href="__CSS__bootstrap.min.css"}-->
    <style>

    </style>

</head>
<body>
    <block class="container">
        <div class="row">
            <div class="col-md-12 bg-primary p20">
                <h1>{$title}</h1>
                <hr>
                <a href="{:url('rest/user/index')}" class="btn btn-default">用户列表首页</a>
                <a href="{:url('rest/user/create')}" class="btn btn-default">添加用户页</a>
            </div>
        </div>

        <div class="clearfix"></div>
        {block name="main"}
        <div class="row mt50">
            <div class="col-md-6">
                <table class="table table-hover bg-info">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>ACTION</th>
                    </tr>
                    {volist name="list" key="k" id="v" mod="2"}
                    {eq name="mod" value="0"}
                    <tr>
                        <td>{$v['id']}</td>
                        <td>{$v['name']}</td>
                        <td class="col-md-6">
                            <a href="{:url('rest/user/readpage',['id'=>$v['id']])}" class="btn btn-sm btn-default">查看(页面)</a>
                            <button data-id="{$v['id']}"  class="btn btn-sm btn-default show-btn"  data-toggle="modal" data-target="#myModal">查看(弹框)</button>
                            <a href="{:url('rest/user/edit',['id'=>$v['id']])}" class="btn btn-sm btn-primary">编辑</a>
                            <button data-id="{$v['id']}" class="btn btn-sm btn-danger del-btn">删除</button>

                        </td>
                    </tr>
                    {/eq}
                    {/volist}
                </table>
            </div>

            <div class="col-md-6">
                <table class="table table-hover bg-info">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>ACTION</th>
                    </tr>
                    {volist name="list" key="k" id="v" mod="2"}
                    {eq name="mod" value="1"}
                    <tr>
                        <td>{$v['id']}</td>
                        <td>{$v['name']}</td>
                        <td class="col-md-6">
                            <a href="{:url('rest/user/readpage',['id'=>$v['id']])}" class="btn btn-sm btn-default">查看(页面)</a>
                            <button data-id="{$v['id']}"  class="btn btn-sm btn-default show-btn">查看(弹框)</button>
                            <a href="{:url('rest/user/edit',['id'=>$v['id']])}" class="btn btn-sm btn-primary">编辑</a>
                            <button data-id="{$v['id']}" class="btn btn-sm btn-danger del-btn">删除</button>

                        </td>
                    </tr>
                    {/eq}
                    {/volist}
                </table>
            </div>
        </div>
    {/block}
    </div>

// 模态框

{block name="sub"}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">/
                        用户 [ <u></u> ] 的详细信息
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="__INDEX__face/batman.jpg" width="100">
                        </div>
                        <div class="col-md-9">
                            <h3></h3>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
</div>

{/block}


    {js href="__JS__jquery.min.js"}
    {js href="__JS__bootstrap.min.js"}

    {block name="myjs"}
    {js href="__JS__toastr.min.js"}

    <script>
        $(function() {
            // 触发删除功能
            $('.del-btn').click(function () {
                var ac_id = $(this).attr('data-id');
                console.log('删除' + ac_id + '的用户');

                if (confirm('您确定要删除吗')) {
                    var obj = $(this).parents('tr');
                    delAjax(ac_id, obj)
                }

            });

            $('.show-btn').click(function () {
                var ac_id = $(this).attr('data-id');
                console.log('查看' + ac_id + '的用户');
                showAjax(ac_id)


            });
        })

        function delAjax(id, obj){
            $.ajax({
                method : 'delete', // 请求方式
                url : '/users/' + id, // 路由+ id
                dataType : 'json',
                success : function (data){
                    console.log(data);
                    if (data.status) {
                        // 将指定的tr行 移除
                        obj.remove();
                        toastr.success(data.info);
                    } else {
                        toastr.error(data.info, 'FBI WARNING:');
                    }
                },
                error : function() {
                    alert('AJAX 执行失败');
                }
            });
        }



        function showAjax(id){
            $.ajax({
                method : 'get', // 请求方式
                url : '/users/' + id, // 路由+ id
                dataType : 'json',
                success : function (data){
                    console.log(data);
                    if (data.status) {
                        // 填充信息
                        $('.modal-title u').html(data.title);
                        var msg = data.datas.id + ':'+data.datas.name+':'+data.datas.tel;
                        $('.modal-body h3').html(msg);

                    } else {
                        // 填充信息
                        $('.modal-title u').html(data.title);
                        $('.modal-body h3').html(data.datas);
                    }
                },
                error : function() {
                    alert('AJAX 执行失败');
                }
            });
        }

    </script>
    {/block}
</body>
</html>